<template>
<view class="container">
    <view class="tab">
      <view v-for="(item, tab_index) in List.tab" :key="tab_index" :style="'border-bottom:' + (showTabIndex == tab_index ? '2px solid '+setting.platformSetting.defaultColor:'')" :data-id="tab_index" @tap="bindTab">{{item.title}}</view>
    </view>
    <view class="Tab_page">
        <block v-for="(list, list_m) in List.listData" :key="list_m">
          <scroll-view :hidden="!(showTabIndex == list_m)" :style="'height: ' + (sysHeight-40) + 'px;'" class="tab_page_list" scroll-y upper-threshold="-30" lower-threshold="10" @scrolltoupper="scrollTopToReflesh" @scrolltolower="scrollBottomToLoadMore">
            <view class="tab_page_list_container" v-if="list&&list.length!=0">
                <!-- 新样式 -->
                <view class="subscribe_item" v-for="(itemData, index) in list" :key="index">
                  <!-- <view class="parting_line">
                    <text class="circle"></text>
                    <text class="circle"></text>
                  </view> -->
                  <view class="subscribe_top_block">
                      <view class="subscribe_top_left">
                          <text class="subscribe_top_item">{{itemData.dateStr}}</text>
                          <text class="subscribe_top_item">{{itemData.week}}</text>
                          <text class="subscribe_top_item">{{itemData.datetimeStart}}</text>
                          <text class="subscribe_top_item">到店</text>
                      </view>
                      <view class="subscribe_top_right">
                          <text style="color: #2c98e4;" v-if="itemData.status==0">待确认</text>
                          <text style="color: #00c356;" v-if="itemData.status==1">已预约</text>
                          <text style="color: #ff4c2d;" v-if="itemData.status==2">已拒绝</text>
                      </view>
                  </view>
                  <view class="subscribe_center_block">
                      <view class="subscribe_center_left">
                          <image class="subscribe_icon" :src="itemData.subscribePlatformUserIcon"></image>
                          <view class="subscribe_info">
                              <text class="subscribe_name">{{itemData.subscribePlatformUserName}}</text>
                              <text class="subscribe_type">服务项目：{{itemData.subscribeName||''}}</text>
                          </view>
                      </view>
                      <view class="handle_btn">
                          <block v-if="itemData.status==1">
                              <text class="handle_btn_item" @tap="changeServantSubscribeStateFun(itemData,2)" style="border: 1rpx solid #ff4c2d;color: #ff4c2d;">
                                  取消预约
                              </text>
                          </block>
                          <block v-if="itemData.status==0">
                              <text class="handle_btn_item" @tap="changeServantSubscribeStateFun(itemData,1)" style="border: 1rpx solid #00c356;color: #00c356;">
                                  确认预约
                              </text>
                              <text class="handle_btn_item" @tap="changeServantSubscribeStateFun(itemData,2)" style="border: 1rpx solid #ff4c2d;color: #ff4c2d;">
                                  拒绝预约
                              </text>
                          </block>
                      </view>
                  </view>
                </view>
                <!-- 新样式 -->
            </view>
            <view class="noList" v-else>
              <text v-if="showTabIndex==0">主人~现在暂时还没有待确认的预约单哦~!</text>
              <text v-if="showTabIndex==1">主人~现在暂时还没有已预约的预约单哦~!</text>
              <text v-if="showTabIndex==2">主人~现在暂时还没有已拒绝的预约单哦~!</text>
            </view>
          </scroll-view>
        </block>
    </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      List: {
        tab: [],
        listData: []
      },
      showTabIndex: 0,
      sysWidth: 320,
      //图片大小
      sysHeight: 500,
      optParam: {},
      setting: "",
      loginUser: ""
    };
  },

  components: {},
  props: {},
  // option数据 用来转发和刷新
  onLoad: function (options) {
    this.optParam = options; // this.getData(0)

    this.loadList();
  },
  onReady: function () {
    this.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser,
      sysWidth: getApp().globalData.sysWidth,
      sysHeight: getApp().globalData.sysHeight
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.List = {
      tab: [],
      listData: []
    };
    this.loadList();
    wx.stopPullDownRefresh();
  },
  methods: {
    changeServantSubscribeStateFun:function(itemData,action){
        console.log("===changeServantSubscribeStateFun===",itemData,action);
        let that=this;
        let content='';
        if(itemData.status==1&&action==2){
            content="主人~您是否确认要取消该预约单!"
        }else if(itemData.status==0&&action==1){
            content="主人~您是否确认要确认该预约单!"
        }else if(itemData.status==0&&action==2){
            content="主人~您是否确认要拒绝该预约单!"
        }
        wx.showModal({
          title: '提示',
          content: content,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.doAction(itemData,action)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
    },
    doAction:function(itemData,action){
        console.log("doAction",itemData,action);
        let that=this;
        let params={
            subscribeId:itemData.id,
            actionMethod:action,
        }
        let customIndex = getApp().globalData.AddClientUrl("/wx_change_servant_subscribes.html", params)
        wx.request({
          url: customIndex.url,
          header: getApp().globalData.header,
          success: function (res) {
            console.log('====doAction-res===', res)
            if (res.data.errcode == 0) {
              wx.showToast({
                title: res.data.errMsg,
                icon: 'success',
                duration: 2000
              })
              let List=JSON.parse(JSON.stringify(that.List));
              for(let i=0;i<List.listData[that.showTabIndex].length;i++){
                  if(List.listData[that.showTabIndex][i].id==itemData.id){
                      List.listData[that.showTabIndex].splice(i,1)
                  }
              }
              that.setData({List:List})
            } else {
              wx.showToast({
                title: res.data.errMsg,
                image: '/wxcomponents/images/icons/tip.png',
                duration: 2000
              })
            }
          },
          complete: function (res) {
        
          }
        })
    },
    /* 回首页 */
    toIndex: function () {
      getApp().globalData.toIndex();
    },
    /* 去掉日期的时间 */
    spliceData: function (e) {
      for (let i = 0; i < e.length; i++) {
        e[i].datetimeEnd = e[i].datetimeEnd.slice(11, -3);
        e[i].datetimeStart = e[i].datetimeStart.slice(11, -3);
        e[i].dateStr = e[i].dateStr.replace(/-/g,'.');
        let switchData=new Date(e[i].dateStr.replace(/-/g,'/')).getDay()
        switch (switchData) {
          case 0:
            e[i].week='周日'
            break;
          case 1:
            e[i].week='周一'
            break;
          case 2:
            e[i].week='周二'
            break;
          case 3:
            e[i].week='周三'
            break;
          case 4:
            e[i].week='周四'
            break;
          case 5:
            e[i].week='周五'
            break;
          case 6:
            e[i].week='周六'
            break;
        }
      }
      return e;
    },
    // 点击Tab切换
    bindTab: function (e) {
      console.log("===bindTab==",e)
      var index = e.currentTarget.dataset.id;
      this.setData({
        showTabIndex: index
      });
    },
    loadTab: function () {
      //加载tab项
      let tab = [ {
        title: '已预约',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      },{
        title: '待确认',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }, {
        title: '已拒绝',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }];
      let List = this.List;
      List.tab = tab;

      for (let i = 0; i < tab.length; i++) {
        List.listData.push([]);
      }

      this.setData({
        List: List
      });
      let listData = this.loadListData(); //加载tab项对应列表数据
    },
    loadListData: function () {
      //加载tab项对应列表数据
      this.getData(1);
      this.getData(0);
      this.getData(2);
      let listData = [];
      return listData;
    },
    // 加载全部数据并且暴露渲染
    loadList: function (e) {
      let tab = this.loadTab(); //加载tab项
    },
    getData: function (tabi) {
      let that = this;
      let getParam = {};
      getParam.status = tabi;
      getParam.page = that.List.tab[tabi].page;
      let customIndex = getApp().globalData.AddClientUrl("/wx_find_servant_subscribes.html", getParam, 'get');
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          let List = that.List; //tab数据变化
          let result=[]
          let index=tabi;
          if(tabi==0){
              index=1
          }else if(tabi==1){
              index=0
          }
          List.tab[index].pageSize = res.data.relateObj.pageSize;
          List.tab[index].curPage = res.data.relateObj.curPage;
          List.tab[index].totalSize = res.data.relateObj.totalSize;
          if(res.data.relateObj.result.length!=0){
              result = that.spliceData(res.data.relateObj.result);
          }
          console.log("result",result)
          List.listData[index] = List.listData[index].concat(result);
          that.setData({
            List: List
          });
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },

    /* 组件事件集合 */
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },
    scrollTopToReflesh: function () {},
    scrollBottomToLoadMore: function () {
      console.log(this.List);
      let List = this.List;
      let tabIndex = this.showTabIndex;
      console.log(List.tab[tabIndex].page);

      if (List.tab[tabIndex].totalSize > List.tab[tabIndex].curPage * List.tab[tabIndex].pageSize) {
        ++List.tab[tabIndex].page;
        this.getData(tabIndex);
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>